<template>
    <div class="followed">
    	<img class="label" src="../assets/img/dingyuewo@2x.png" />
    	<img class="close" src="../assets/img/butuisong@2x.png" @click.stop.self="close(momentType, momentId)"/>
      <a :href="Props.USER_CODE | jybFilter">
      	<div class="followed_con">
      		<div class="touxiang">
            <avatar :src="Props.USER_PHOTO" :href="Props.USER_CODE"/>
      			<!-- <img :src="Props.USER_PHOTO !== ''? Props.USER_PHOTO : `${require('@/assets/img/touxiangBG@2x.png')}`"/> -->
      		</div>
      		<div class="info">
             <div class="info_name">
               <span class="v_name">{{Props.NICK_NAME}}</span>
             </div>
      			 <p class='info_con'>刚刚<span>订阅了我</span>向我进贡<span v-text="Props.JYB_COUNT"></span>君元宝</p>
      			 <span class='go_other'>
      			 	 查看君元宝记录 >
      			 </span>
      		</div>
      	</div>
      </a>
      <slot></slot>
    </div>
</template>

<script>
import BottomBar from './common/BottomBar'
import MomentMixin from './MomentMixin'
import { jybFilter } from '../filters/userFilter'
import Avatar from './Avatar'

export default {
  name: 'orderMe',
  props: {
    Props: {
      type: Object,
      default: {}
    }
  },
  filters: {
    jybFilter
  },
  mixins: [MomentMixin],
  components: {
    Avatar,
    BottomBar
  }
}
</script>

<style lang="less" scoped>
@import "./common/mixins.less";
.followed {
  .moment;
  position:relative;
  .label {
    position: absolute;
    left: -2px;
    top: 5px;
    width: 27px;
    height: 118px;
  }
  .close {
  	position: absolute;
  	right: 4px;
  	top: 0px;
  	width: 34px;
  	height: 24px;
  }
}
.followed_con {
  height: 143px;
  width: 100%;
  padding: 35px 20px 0 41px;
	box-sizing: border-box;
	display: flex;
	flex: 1;
 	text-align: left;
 }
.touxiang {
	width: 58px;
	height: 58px;
  margin-right: 17px;
	img{
		width: 100%;
	  height: 100%;
		display: block;
	}
}
.info {
  flex: 2;
}
.info_con {
	.info_con_font;
  .ellipsis();
	color: #777777;
	margin-bottom: 10px;
	span {
		color: #FD363B;
		margin-right: 12px;
	}
	span:nth-child(2) {
		margin: 0 3px;
	}
}
.go_other {
	.go_other_font;
}
</style>
